import React, { Component } from 'react';
import { observable, autorun, action, computed } from 'mobx'
import { observer } from 'mobx-react';

class MyState {
  @observable num1 = 0
  @observable num2 = 0
  @action addNum1 = () => {
    this.num1 ++
  }
  @action addNum2 = () => {
    this.num2 ++
  }
  @computed get totalNum() {
    return this.num1 + this.num2
  }
}

const mystate = new MyState()

const TotalNum = observer((props) => <div> num1 + num2 = {props.store.totalNum}</div>)

const HandleAdd = observer((props) => {
  return (
    <div>
      num1: {props.store.num1}
      num2: {props.store.num2}
      <button onClick={props.store.addNum1}>数字1增加</button>
      <button onClick={props.store.addNum2}>数字2增加</button>
    </div>
  )
})

@observer
export default class MobxNext extends Component {
  render() {
    return (
      <div>
        <TotalNum store={mystate}/>
        <HandleAdd store={mystate}/>
      </div>
    )
  }
}

